<template>
  <div class="container">
    <el-dialog
      title="预览文章"
      :visible="showPreviewDialog"
      width="50%"
      @close="cancelBtn"
    >
      <el-row>
        <h2>{{ previewDate.title }}</h2>
      </el-row>
      <el-row>
        <span style="margin-right: 10px"> {{ previewDate.createTime |parseTime }} </span>
        <span style="margin-right: 10px"> {{ previewDate.creator }}</span>
        <span style="margin-right: 10px">
          <i class="el-icon-view"></i> {{ previewDate.visits }}
        </span>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-card shadow="never" style="background: #f5f5f5">
          <div v-html="previewDate.articleBody"></div>
        </el-card>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/articles";
export default {
  data() {
    return {
      previewDate: [], //预览数据
    };
  },
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false,
    },
    articleId: {
      type: Number,
      required: true,
    },
  },
  methods: {
    // 获取信息
    async getPreviewData(id) {
      const { data } = await detail({ id });
      // console.log(data);
      this.previewDate = data;
    },
    // 关闭弹层
    cancelBtn() {
      this.$emit("update:showPreviewDialog", false);
    },
  },
};
</script>

<style scoped lang='less'></style>
